<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>报单信息</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<%@include file="common.jsp"%>
<style type="text/css">
	/*table{*/
	   /*width:100px;*/
	   /*table-layout:fixed;!* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 *!*/
	/*}*/
	/*td{*/
	   /*width:100%;*/
	   /*word-break:keep-all;!* 不换行 *!*/
	   /*white-space:nowrap;!* 不换行 *!*/
	   /*overflow:hidden;!* 内容超出宽度时隐藏超出部分的内容 *!*/
	   /*text-overflow:ellipsis;!* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用*!*/
	   /*-o-text-overflow:ellipsis;*/
	   /*-icab-text-overflow: ellipsis;*/
	   /*-khtml-text-overflow: ellipsis;*/
	   /*-moz-text-overflow: ellipsis;*/
	   /*-webkit-text-overflow: ellipsis;*/
	/*}*/
	.myImage{
		width:30%;
		margin:5px;
	}
	.bigImage{
		width:100%;
		margin:5px;
	}
</style>
</head>
<body style="margin-top:-10px;">
	<div id="toolbar">
		<div style="margin-top:20px;">
			<div class="btn-group">
				<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			  	报单状态<span class="caret"></span>
				</button>
				<ul class="dropdown-menu" style="width:100%">
				    <li><a href="#" onclick="findTable(-1)">全部</a></li>
				    <li><a href="#" onclick="findTable(1)">已审核</a></li>
				    <li><a href="#" onclick="findTable(0)">未审核</a></li>
			  	</ul>
		  	</div>
		  	<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#addDeclarationBox" >报单</button>
		  	<button onclick="auditDeclaration()" class="btn btn-primary btn-lg" data-toggle="modal">审核</button>
		  	<button onclick="auditFile()" class="btn btn-primary btn-lg" data-toggle="modal">驳回</button>
			<button id="imgBox" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#imgBoxDiv">打开图片窗口</button>
			<span style="font-weight: bold;color: red;">当前还有<span id="unreviewedNum">1</span>条未审核的报单</span>
		</div>
	</div>
	<div>
		<table id="declarationTable" class="text-nowrap"></table>
	</div>
	<!-- 打开兑换二维码图片窗口 -->
	<div class="modal fade" id="imgBoxDiv" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">兑换二维码</h4>
            </div>
            <div class="modal-body">
            	<div id="maxImg"></div>	
			 	<div id="myimg"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
	</div>
	<!-- 打开新增报单窗口 -->
	<div class="modal fade" id="addDeclarationBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">新增报单信息</h4>
            </div>
            <div class="modal-body">
			 	<form id="declarationForm" method='post' class="form-inline" enctype="multipart/form-data">
				 	<div class="form-group">
				    	<label for="exampleInputName2">用户编码：</label>
				    	<input id="userCode" name="userCode" class="form-control"/>
				  	</div>
				  	<div class="form-group">
				  		<label for="exampleInputEmail2">银行产品：</label>
				  		<select id="bankTypeCode" name="bankTypeCode" class="form-control" style="width:179px;padding: 0 10px 0 0;"></select>
				  	</div>
				  	<div class="form-group" style="margin-top:20px;width:100%;">
				  		<label for="exampleInputEmail2">兑换编码：</label>
				  		<input id="declarationExchangeCode" name="declarationExchangeCode" style="width:94%" class="form-control"/>
				  	</div>
				  	<div class="form-group" style="margin-top:20px;width:100%;">
				  		<label for="exampleInputEmail2">备注信息：</label>
				  		<input id="remark" name="remark" class="form-control" style="width:94%"/>
				  	</div>
				  	<div class="form-group" style="margin-top:20px;">
				  		<label for="exampleInputEmail2" style="float:left;">上传图片：</label>
				  		<input name="uploadImgs" style="float:left;" type="file" multiple="multiple" />
				  	</div>
				</form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="submitDeclaration()">提交</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
	</div>
</body>
<script type="text/javascript">
//重载表格
$(function(){
	unreviewedNum();
	//定时刷新当前未审核报单数量 1000 = 1秒
	setTimeout("unreviewedNum()",30000);
	//隐藏打开图片窗口按钮
	$('#imgBox').hide();
	//加载表格
	$("#declarationTable").bootstrapTable({
		url: "${pageContext.request.contextPath}/declaration/findDeclaration.do",
		method: "post",
		cache: false,
		dataType: "json",
		contentType: "application/x-www-form-urlencoded",
		toolbar: "#toolbar",
		classes: "table table-hover table-striped",
		height:450,
		pagination: true,
		sidePagination: 'server',
		search: false,
		smartDisplay:false,
		sortOrder: "desc",
		searchText: "",
		showRefresh: false,
		showToggle: false,
		singleSelect: true,
		showPaginationSwitch: false,
		pageNumber: 1,
		pageSize: 5,
		pageList: [5, 10, 20, 40],
		clickToSelect: true,
		onCheck: function (row) {
		},
		queryParamsType: "undefined",
		queryParams: function (params) {
			var params = {
				pageNum: params.pageNumber,
				pageSize: params.pageSize,
				sortBy: params.sortOrder,
			}
			return params;
		},
		columns: [
			{
				field:	"",
				title:	"",
				checkbox: true
			},	{
				field:	"id",
				title:	"报单编码"
			},	{
				field: "userName",
				title: "用户名称"
			}, {
				field: "bankTypeName",
				title: "产品名称"
			}, {
				field: "declarationExchangeCode",
				title: "兑换编码",
				/* width: 400 */
			}, {
				field: "declarationNum",
				title: "报单数量",
				/* width: 400 */
			}, {
				field: "remark",
				title: "备注信息"
			}, {
				field: "status",
				title: "报单状态",
				formatter: formatStatus
			}, {
				field: "createTime",
				title: "创建时间",
				formatter: formatTime

			}, {
				field: "updateEmp",
				title: "操作人员"
			}, {
				field: "updateTime",
				title: "操作时间",
				formatter: formatTime
			}

		],
		responseHandler: function (data) {//onLoad前处理数据源
			return data;
		},
		onLoadSuccess: function (data) {	//成功时执行
			//表格超出文本显示省略号
			/* $('.bootstrap-table tr td').each(function () {
                $(this).attr("title", $(this).text());
                $(this).css("cursor", 'pointer');
            }); */
		},
		onLoadError: function (data) {	//失败时执行
			return;
		},
		//双击行打开图片
		onDblClickRow:function(row){
			$('#maxImg').html('');
            /* $.ajax({
                url:"${pageContext.request.contextPath}/declaration/openImage.do",
                contentType:"application/x-www-form-urlencoded",
                data:{imageName:row.declarationImg},
                type:"post",
                cache:false,//false是不缓存，true为缓存
                async:true,//true为异步，false为同步
                success:function(data){
                    var array = eval("("+data+")"); ;
                    var html = "";
                    for(var a in array){
                        html += "<a href='javascript:void(0)' onclick='bigImg(this)'><img class='myImage' src="+array[a]+" /></a>";
                    }
                    $("#myimg").html(html);
                    $('#imgBox').click();
                }
            }) */
            var imgName = row.declarationImg.split(";");
            var html = '';
            for(var i = 0;i<imgName.length;i++){
            	if(imgName[i] != '' && imgName[i] != null){
					var imgUrl = "${pageContext.request.contextPath}/management/uploadImg/"+imgName[i];
		            html += "<a href='javascript:void(0)' onclick='bigImg(this)'><img class='myImage' src="+imgUrl+" /></a>";
            	}
            }
            $("#myimg").html(html);
            $('#imgBox').click();
		}
	});
	//加载银行信息下拉框
	$.ajax({
		url:"${pageContext.request.contextPath}/bankType/findBankType.do",
		contentType:"application/x-www-form-urlencoded",
		data:{start:null,pageSize:null},
		type:"post",
		cache:false,//false是不缓存，true为缓存
	    async:true,//true为异步，false为同步
		success:function(data){
			var datas = jQuery.parseJSON(data);
			var bankTypeCode = $("#bankTypeCode");
			for (var i = 0; i < datas.rows.length; i++) {
				//获取上级类别
				bankTypeCode.append("<option value='"+datas.rows[i].bankTypeCode+"'>"
						+ datas.rows[i].bankTypeName + "</option>");
			}
		}
	})
})
//图片放大
function bigImg(e){
	var imgUrl = $(e).children()[0].src;
	var html = "<img class='bigImage' src="+imgUrl+" />";
	$('#maxImg').html(html);
	//设置当前节点所有兄弟节点下的子节点的样式
	//$(e).siblings().children().attr("class","myImage");
	//设置当前节点下的子节点样式
	//$(e).children().attr("class","c");
}
//格式化订单状态
function formatStatus(value, row, index){
	if(value == null) {
		return '';
	}
	if(value == 1){
		return "已审核";
	}
	if(value == 2){
		return "已驳回";
	}
	if(value == 0){
		return "未审核";
	}
}
//格式化订单类型
function formatOrderType(value, row, index){
	if(value == null) {
		return '';
	}
	if(value == 1){
		return "积分兑换";
	}
	if(value == 2){
		return "提现";
	}
	if(value == 3){
		return "充值";
	}
}
//审核按钮
function auditDeclaration(){
	var datas = $('#declarationTable').bootstrapTable('getSelections');
	if(datas.length <= 0){
        alert('请选择数据！');
        return;
    }
	var data = datas[0];
	if(data.status == 1){
		alert("请选择未审核的数据");
		return;
	}
	if(confirm("确认审核 ？")){
		$.ajax({
			url:"${pageContext.request.contextPath}/declaration/auditDeclaration.do",
			data: {
				id: data.id,
				bankTypeCode: data.bankTypeCode,
				userOpenid: data.userOpenid,
				declarationNum: data.declarationNum
			},
			type:"post",
			dataType:"json",
			processData: true,
			success:function(data){
				alert(data);
				//刷新表格数据
				$('#declarationTable').bootstrapTable('refresh');
			}
		})
	}
}
//报单状态重新加载表格
function findTable(value){
	if(value == -1){
		//重载表格
		$('#declarationTable').bootstrapTable('refresh');
	}else if(value == 1){
		//重载表格
		$('#declarationTable').bootstrapTable('refresh',{query: {status: value}});
	}else if(value == 0){
		//重载表格
		$('#declarationTable').bootstrapTable('refresh',{query: {status: value}});
	}
	
}
//驳回按钮
function auditFile(){
	var datas = $('#declarationTable').bootstrapTable('getSelections');
	if(datas.length <= 0){
        alert('请选择数据！');
        return;
    }
	var data = datas[0];
	if(data.status == 1){
		alert("请选择未审核的数据");
		return;
	}
	if(confirm("确认驳回 ？")){
		$.ajax({
			url:"${pageContext.request.contextPath}/declaration/auditFile.do",
			data: {
				id: data.id,
				bankTypeCode: data.bankTypeCode,
				userOpenid: data.userOpenid
			},
			type:"post",
			dataType:"json",
			processData: true,
			success:function(data){
				alert("报单驳回！")
				//刷新表格数据
				$('#declarationTable').bootstrapTable('refresh');
			}
		})
	}
}
//新增报单信息
function submitDeclaration(){
	if($('#userCode').val() == ''){
		return alert("请输入用户编码！");
	}
	if($('#declarationExchangeCode').val() == ''){
		return alert("请输入兑换编码");
	}
	
	//from对象序列化
	//var data = $('#declarationForm').serialize();
	//var submitData = decodeURIComponent(data,true);
	var submitData = new FormData(document.getElementById("declarationForm"));
	$.ajax({
		url: "${pageContext.request.contextPath}/declaration/artificialDeclaration.do",
		data: submitData,
		type: "post",
		processData: false,
		contentType:false,
		success:function(data){
			alert(data);
			//刷新表格数据
			$('#declarationTable').bootstrapTable('refresh');
			//隐藏模态框
			$('#addDeclarationBox').modal('hide');
		}
	})
}
/**
 * 定时刷新 当前未审核的报单数量
 */
function unreviewedNum(){
	$.ajax({
		url: "${pageContext.request.contextPath}/declaration/unreviewedNum.do",
		type: "post",
		processData: false,
		contentType:false,
		success:function(data){
			$('#unreviewedNum').text(data);
		}
	})
}
</script>
</html>